<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
padding: 0;
margin: 0;
box-sizing: border-box;
        }

        body{
display: flex;
justify-content: center;
padding-top: 50px;

        }
        .grid{
            width: 80%;
            display: grid;
            grid-template-columns: minmax(300px,1fr) 2fr 1fr 1fr;
           
            /*grid-template-columns: repeat(2,1fr 2fr);*/
            grid-column-gap: 20px;
            border: 1px solid rgb(5, 85, 29);
            justify-content: center;
        }
        .grid>div{
width: 100%;
height: 200px;
background: #e84393;
color: rgb(91, 212, 228);
border: 1px soild rgb(74, 211, 235);
/* Alignment Text only*/
display: flex;
justify-content: center;
align-items: center;
        }
    </style>
    <title>Demo 1-3 Column Layout</title>
</head>
<body>
    <div class="container grid">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

    </div>
</body>
</html>

<!--
parent container
display:grid
grid-template-columns
grid-column-gap
fr-fractional unit-free space
minmax-最少-最多的单位
repeat
-->